/*
 * @Author: liangliang
 * @Date: 2023-05-18 15:40:29
 * @LastEditors: yusha
 * @LastEditTime: 2023-08-25 10:14:43
 * @Description: 线上bug登记
 */

import React, { useState, useEffect } from 'react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { solarizedlight } from 'react-syntax-highlighter/dist/esm/styles/prism';

import { useAntdTable } from 'ahooks';
import {
    Button,
    Form,
    Input,
    Row,
    message,
    Space,
    DatePicker,
    Table,
    Modal,
    Select,
    Col,
    Card,
    Switch,
    Radio,
    TreeSelect,
    Cascader,
    InputNumber,
    Spin,
} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
import TextArea from 'antd/es/input/TextArea';
import { useFormModal } from '@/hooks/useFormModal';
import {
    bugRegisterEdit,
    bugRegisterQryPage,
    bugRegisterAdd,
} from '@/config/request/manage';
import { creatOrder } from '@/config/request/testTools';
import { orderProcess } from '@/config/request/testTools';
import { creatProduct } from '@/config/request/testTools';

import './../module/index.scss';
type SizeType = Parameters<typeof Form>[0]['size'];

type FieldType = {
    platformOrderNo?: string;
    orderNode?: string;
};

const CustomerApi: React.FC = () => {
    const formTailLayout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 14, offset: 4 },
    };
    const [form] = Form.useForm();
    const [productForm] = Form.useForm();

    const [products, setProduct] = useState([
        {
            key: '0',
            productType: '1',
            productSku: 'productSku',
            quantity: 'productQuery',
        },
    ]);
    const options = [
        {
            value: '1',
            label: '普通',
        },
        {
            value: '2',
            label: 'OEM',
        },
        {
            value: '3',
            label: '组合',
        },
    ];

    const [loading, setLoading] = useState(false);

    // todo: 等待接口请求
    const onCheck = async () => {
        // console.log(products, 'products');
        setLoading(true);

        const re = form.getFieldsValue();

        // console.log("************", re);

        const param = {
            operationNode: Number.parseInt(re.node),
            orderType: re.orderType,
            password: re.password,
            platform: re.platfrom,
            products,
            userName: re.username,
            ...re,
        };
        console.log('------------', param);
        const res = await creatOrder(param);
        if (res.data != null) {
            setLoading(false);
        }
        console.log(res);
        showModal(res.data);
    };

    // todo: 等待接口请求：/order/orderProcess
    const onCheck1 = async () => {
        try {
            const re = await form.validateFields();
            const param = {
                operationNode: Number.parseInt(re.orderNode),
                platformOrderNo: re.platformOrderNo,
            };
            console.log('------------', param);
            setLoading(true);
            const res = await orderProcess(param);
            setLoading(false);
            showModal(res.data);
            console.log('Success:', res);
        } catch (errorInfo) {
            console.log('Failed:', '必填项为空');
        }
    };

    // todo: 等待接口请求：/goods/createProduct
    const onCheckCreatProduct = async () => {
        try {
            const re = await productForm.validateFields();
            const param = {
                productType: Number.parseInt(re.productType),
                oemProductClassificationId: Number.parseInt(
                    re.oemProductClassificationId
                ),
                offlineDirectSaleFlag: Number.parseInt(
                    re.offlineDirectSaleFlag
                ),
                userInfo: {
                    userName: re.loginName,
                    password: re.password,
                    customerShopName: re.customerShopName,
                },
            };
            console.log('------------', param);
            setLoading(true);
            const res = await creatProduct(param);
            setLoading(false);
            showModal(res.data);
            console.log('Success:', res);
        } catch (errorInfo) {
            console.log('Failed:', '必填项为空');
        }
    };

    const changeProductType = (
        chooseIndex: number,
        attr: string,
        optionValue: string
    ) => {
        const newList = products.map((item, index) => {
            if (index !== chooseIndex) return item;
            item[attr] = optionValue;
            return { ...item };
        });
        setProduct(newList);
    };

    const onChangeInput = (chooseIndex: number, attr: string, value: any) => {
        const newList = products.map((item, i) => {
            if (i !== chooseIndex) return item;
            item[attr] = value;
            return { ...item };
        });

        setProduct(newList);
    };

    const reduce = (index: number) => {
        console.log(index, 'index');
        products.splice(index, 1);
        setProduct([...products]);
    };
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [jsonObj, setJsonStr] = useState({});

    const showModal = (obj) => {
        setJsonStr(obj);
        setIsModalOpen(true);
    };

    const handleOk = () => {
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const add = () => {
        const newList = products.concat([
            {
                key: 'key' + products.length,
                productType: '1',
                productSku: 'productSku',
                quantity: '10',
            },
        ]);

        setProduct(newList);
    };

    return (
        <div className="bg-white p-2.5">
            {loading ? (
                <Spin tip="Loading" size="large">
                    <div className="content" />
                </Spin>
            ) : (
                <div>
                    <Row gutter={16} style={{ marginBottom: '20px' }}>
                        <Col span={12}>
                            <Card title="一键下单" bordered={false}>
                                <Form
                                    labelCol={{ span: 4 }}
                                    wrapperCol={{ span: 14 }}
                                    layout="horizontal"
                                    form={form}
                                >
                                    <Form.Item
                                        label="用户名："
                                        name={'username'}
                                    >
                                        <Input />
                                    </Form.Item>
                                    <Form.Item label="密码：" name={'password'}>
                                        <Input />
                                    </Form.Item>
                                    <Form.Item label="订单节点：" name={'node'}>
                                        <Select>
                                            <Select.Option value="1">
                                                下单完成
                                            </Select.Option>
                                            <Select.Option value="2">
                                                分单完成
                                            </Select.Option>
                                            <Select.Option value="3">
                                                采购完成
                                            </Select.Option>
                                            <Select.Option value="4">
                                                入库完成
                                            </Select.Option>
                                        </Select>
                                    </Form.Item>
                                    <Form.Item
                                        label="订单类型："
                                        name={'orderType'}
                                    >
                                        <Radio.Group>
                                            <Radio value={1}>直发</Radio>
                                            <Radio value={2}>囤货</Radio>
                                        </Radio.Group>
                                    </Form.Item>
                                    <Form.Item
                                        label="平台类型："
                                        name={'platfrom'}
                                    >
                                        <Radio.Group>
                                            <Radio value={1}>D2C</Radio>
                                            <Radio value={2}>B2B</Radio>
                                        </Radio.Group>
                                    </Form.Item>
                                    <Form.Item
                                        label="使用库龄库存："
                                        name={'useOneTheWayInventory'}
                                    >
                                        <Radio.Group>
                                            <Radio value={true}>是</Radio>
                                            <Radio value={false}>否</Radio>
                                        </Radio.Group>
                                    </Form.Item>
                                    <Form.Item label="下单商品：">
                                        {products.map((item, index) => {
                                            return (
                                                <Space key={item.key}>
                                                    <Space.Compact>
                                                        <Form.Item
                                                            style={{
                                                                width: '17%',
                                                            }}
                                                        >
                                                            <Select
                                                                defaultValue="普通"
                                                                options={
                                                                    options
                                                                }
                                                                onChange={(
                                                                    optionValue
                                                                ) =>
                                                                    changeProductType(
                                                                        index,
                                                                        'productType',
                                                                        optionValue
                                                                    )
                                                                }
                                                            />
                                                        </Form.Item>
                                                        <Form.Item
                                                            style={{
                                                                width: '63%',
                                                            }}
                                                        >
                                                            <Input
                                                                onChange={(e) =>
                                                                    onChangeInput(
                                                                        index,
                                                                        'productSku',
                                                                        e.target
                                                                            .value
                                                                    )
                                                                }
                                                                placeholder="请输入sku"
                                                            />
                                                        </Form.Item>
                                                        <Form.Item
                                                            style={{
                                                                width: '20%',
                                                            }}
                                                        >
                                                            <Input
                                                                placeholder="请输入数量"
                                                                onChange={(e) =>
                                                                    onChangeInput(
                                                                        index,
                                                                        'quantity',
                                                                        e.target
                                                                            .value
                                                                    )
                                                                }
                                                            />
                                                        </Form.Item>
                                                        <div
                                                            onClick={(e) =>
                                                                add()
                                                            }
                                                        >
                                                            <PlusCircleOutlined
                                                                style={{
                                                                    fontSize:
                                                                        '30px',
                                                                    color: 'rgb(196 199 202)',
                                                                }}
                                                            />
                                                        </div>
                                                        <span
                                                            onClick={(e) =>
                                                                reduce(index)
                                                            }
                                                        >
                                                            <MinusCircleOutlined
                                                                style={{
                                                                    fontSize:
                                                                        '30px',
                                                                    color: 'rgb(196 199 202)',
                                                                }}
                                                            />
                                                        </span>
                                                    </Space.Compact>
                                                </Space>
                                            );
                                        })}
                                    </Form.Item>
                                    <Form.Item {...formTailLayout}>
                                        <Button
                                            type="primary"
                                            style={{ width: '100%' }}
                                            onClick={onCheck}
                                        >
                                            提交
                                        </Button>
                                    </Form.Item>
                                </Form>
                            </Card>
                        </Col>
                        <Col span={12}>
                            <Card title="d2c/b2b订单流程" bordered={false}>
                                <Form<FieldType>
                                    labelCol={{ span: 4 }}
                                    wrapperCol={{ span: 14 }}
                                    layout="horizontal"
                                    form={form}
                                    initialValues={{ orderNode: '10' }}
                                >
                                    <Form.Item
                                        label="订单号："
                                        name={'platformOrderNo'}
                                        rules={[
                                            {
                                                required: true,
                                                message: '请输入订单号!',
                                            },
                                        ]}
                                    >
                                        <Input placeholder="请输入订单号" />
                                    </Form.Item>
                                    <Form.Item
                                        label="订单节点："
                                        name={'orderNode'}
                                        rules={[{ required: true }]}
                                    >
                                        <Select
                                            options={[
                                                {
                                                    value: '2',
                                                    label: '分单完成',
                                                },
                                                {
                                                    value: '3',
                                                    label: '采购完成',
                                                },
                                                {
                                                    value: '4',
                                                    label: '入库上架完成',
                                                },
                                                {
                                                    value: '5',
                                                    label: '组合完成',
                                                },
                                                {
                                                    value: '6',
                                                    label: '审单完成',
                                                },
                                                {
                                                    value: '7',
                                                    label: '国际发货单待处理',
                                                },
                                                {
                                                    value: '8',
                                                    label: '拣货完成',
                                                },
                                                {
                                                    value: '9',
                                                    label: '打包完成',
                                                },
                                                {
                                                    value: '10',
                                                    label: '发货完成',
                                                },
                                            ]}
                                        />
                                    </Form.Item>
                                    <Form.Item {...formTailLayout}>
                                        <Button
                                            type="primary"
                                            style={{ width: '100%' }}
                                            onClick={onCheck1}
                                        >
                                            提交
                                        </Button>
                                    </Form.Item>
                                </Form>
                            </Card>
                        </Col>
                    </Row>
                    <Row gutter={16} style={{ marginBottom: '20px' }}>
                        <Col span={12}>
                            <Card title="一键创建商品" bordered={false}>
                                <Form<FieldType>
                                    labelCol={{ span: 4 }}
                                    wrapperCol={{ span: 14 }}
                                    layout="horizontal"
                                    form={productForm}
                                    initialValues={{
                                        productType: '2',
                                        oemProductClassificationId: '1',
                                        offlineDirectSaleFlag: '1',
                                    }}
                                >
                                    <Form.Item
                                        label="平台商品类型："
                                        name={'productType'}
                                        rules={[{ required: true }]}
                                    >
                                        <Select
                                            options={[
                                                {
                                                    value: '1',
                                                    label: '线下商品',
                                                },
                                                {
                                                    value: '2',
                                                    label: 'OEM商品',
                                                },
                                                // { value: '3', label: '组合商品' },
                                            ]}
                                        />
                                    </Form.Item>
                                    <Form.Item
                                        noStyle
                                        shouldUpdate={(
                                            prevValues,
                                            currentValues
                                        ) => prevValues.productType === '2'}
                                    >
                                        {({ getFieldValue }) =>
                                            getFieldValue('productType') ===
                                            '2' ? (
                                                <>
                                                    <Form.Item
                                                        label="OEM商品类型："
                                                        name={
                                                            'oemProductClassificationId'
                                                        }
                                                        rules={[
                                                            { required: true },
                                                        ]}
                                                    >
                                                        <Select
                                                            options={[
                                                                {
                                                                    value: '1',
                                                                    label: '服装',
                                                                },
                                                                {
                                                                    value: '2',
                                                                    label: '杂货',
                                                                },
                                                                {
                                                                    value: '3',
                                                                    label: '辅料',
                                                                },
                                                            ]}
                                                        />
                                                    </Form.Item>
                                                    {/* <Form.Item
                                                            label="用户名："
                                                            name={'loginName'}
                                                            rules={[{ required: true, message: '请输入用户名!' }]}
                                                        >
                                                            <Input placeholder="请输入用户名" />
                                                        </Form.Item>
                                                        <Form.Item
                                                            label="密码："
                                                            name={'password'}
                                                            rules={[{ required: true, message: '请输入密码!' }]}
                                                        >
                                                            <Input placeholder="请输入密码" />
                                                        </Form.Item> */}
                                                    <Form.Item
                                                        label="店铺名称/ID："
                                                        name={
                                                            'customerShopName'
                                                        }
                                                        rules={[
                                                            {
                                                                required: true,
                                                                message:
                                                                    '请输入店铺名或者店铺ID!',
                                                            },
                                                        ]}
                                                    >
                                                        <Input placeholder="请输入店铺名或者店铺ID" />
                                                    </Form.Item>
                                                </>
                                            ) : null
                                        }
                                    </Form.Item>
                                    <Form.Item
                                        noStyle
                                        shouldUpdate={(
                                            prevValues,
                                            currentValues
                                        ) => prevValues.productType === '1'}
                                    >
                                        {({ getFieldValue }) =>
                                            getFieldValue('productType') ===
                                            '1' ? (
                                                <Form.Item
                                                    label="平台类型："
                                                    name={
                                                        'offlineDirectSaleFlag'
                                                    }
                                                    rules={[{ required: true }]}
                                                >
                                                    <Select
                                                        options={[
                                                            {
                                                                value: '1',
                                                                label: '直采商城',
                                                            },
                                                            {
                                                                value: '2',
                                                                label: '代采商城',
                                                            },
                                                        ]}
                                                    />
                                                </Form.Item>
                                            ) : null
                                        }
                                    </Form.Item>
                                    <Form.Item {...formTailLayout}>
                                        <Button
                                            type="primary"
                                            style={{ width: '100%' }}
                                            onClick={onCheckCreatProduct}
                                        >
                                            提交
                                        </Button>
                                    </Form.Item>
                                </Form>
                            </Card>
                        </Col>
                        <Col span={12}>
                            <Card title="一键修改会员等级" bordered={false}>
                                <Form
                                    labelCol={{ span: 4 }}
                                    wrapperCol={{ span: 14 }}
                                    layout="horizontal"
                                >
                                    <Form.Item label="登陆名称：">
                                        <Input />
                                    </Form.Item>
                                    <Form.Item label="店铺ID：">
                                        <Input />
                                    </Form.Item>
                                    <Form.Item label="会员等级：">
                                        <Select>
                                            <Select.Option value="1">
                                                经济舱
                                            </Select.Option>
                                            <Select.Option value="2">
                                                标准舱
                                            </Select.Option>
                                            <Select.Option value="3">
                                                商务舱
                                            </Select.Option>
                                            <Select.Option value="4">
                                                头等舱
                                            </Select.Option>
                                        </Select>
                                    </Form.Item>
                                    <Form.Item {...formTailLayout}>
                                        <Button
                                            type="primary"
                                            style={{ width: '100%' }}
                                            onClick={onCheck}
                                        >
                                            提交
                                        </Button>
                                    </Form.Item>
                                </Form>
                            </Card>
                        </Col>
                    </Row>
                    <Modal
                        title="执行结果："
                        open={isModalOpen}
                        onOk={handleOk}
                        onCancel={handleCancel}
                    >
                        <SyntaxHighlighter
                            language="javascript"
                            style={solarizedlight}
                        >
                            {/* {code} */}
                            {JSON.stringify(jsonObj, null, 4)}
                        </SyntaxHighlighter>
                    </Modal>
                </div>
            )}
        </div>
    );
};

export default CustomerApi;
